<template>
  <div>
    <!-- table区域-begin -->
      <vxe-grid
        id="ExcelExportRuleList"
        ref="vxeTable"
        v-bind="gridOptions"
        :height="height - 40"
        :rowConfig="{keyField:'id'}"
        :sortConfig="{trigger: 'cell'}"
        :pagerConfig="false"
        v-on="listeners"
      >
      <template #action="{ row }">
        <template>
          <a @click="handleEdit(row)">编辑</a>
          <a-divider type="vertical" />
          <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(row.id)">
            <a>删除</a>
          </a-popconfirm>
        </template>
      </template>
    </vxe-grid>
    <!-- table区域-end -->
    <ExcelExportColumnModal :solutionId="templateData.id" ref="modalForm" @ok="modalFormOk" />
  </div>
</template>

<script>
import ExcelExportColumnModal from './ExcelExportColumnModal'
import VxeTableListMixin from '@/mixins/VxeTableListMixin'
import { getAction } from '@/services/manage'
export default {
  name: 'ExcelExportRuleList',
  components: {
    ExcelExportColumnModal
  },
  props: {
    templateData: {
      type: Object,
      default: () => {}
    },
    tableLoading: Boolean
  },
  mixins: [VxeTableListMixin],
  data() {
    return {
      columns: [
        { type: 'checkbox', width: 40, fixed: 'left' },
        { type: 'seq', width: 40, fixed: 'left' },
        {
          title: '字段名称',
          field: 'columnName',
          showOverflow: true,
          width: 100,
          fixed: 'left'
        },
        {
          title: '标签',
          field: 'label',
          showOverflow: true,
          width: 100
        },
        {
          title: '级别',
          field: 'level',
          showOverflow: true,
          width: 120
        },
        {
          title: '宽度',
          field: 'width',
          showOverflow: true,
          width: 120
        },
        {
          title: '顺序',
          field: 'sort',
          showOverflow: true,
          width: 100
        },
        {
          title: '数据对齐方式',
          field: 'dataAlign',
          showOverflow: true,
          width: 120,
          slots: { default: ({ row }) => {
            if (row.dataAlign === 0) {
              return '左对齐'
            }
            if (row.dataAlign === 0) {
              return '居中'
            }
            if (row.dataAlign === 0) {
              return '右对齐'
            }
          } }
        },
        {
          title: '操作',
          field: 'action',
          slots: { default: 'action' },
          width: 120,
          fixed: 'right'
        }
      ],
      url: {
        delete: '/excel/export/solution/column/remove/',
        deleteBatch: '/excel/export/solution/column/remove/',
        list: '/excel/export/solution/columns/'
      },
      proxyConfig: {
        autoLoad: false
      },
      sortConfig: {
        defaultSort: {
          field: 'sort',
          order: 'desc'
        }
      }
    }
  },
  computed: {
    toolbarConfig() {
      return {
        import: false,
        buttons: [
          { buttonRender: { name: 'VxeToolbarAdd', events: { click: this.handleAdd }, disabled: Object.keys(this.templateData) <= 0 }},
          { buttonRender: { name: 'VxeToolbarBatchDel', events: { click: this.batchDel }, disabled: Object.keys(this.templateData) <= 0 }}
        ],
        tools: []
      }
    }
  },
  methods: {
    modalFormOk() {
      this.$emit('ok')
      this.loadData()
    }

  },
  watch: {
    templateData: {
      handler(newData) {
        if (newData && newData.id) {
          this.url.list = `/excel/export/solution/columns/${newData.id}`
          this.loadData()
        } else {
          this.$refs.vxeTable.reloadData([])
        }
      },
      deep: true
    }
  }
}
</script>

